.inp *{
    box-sizing: border-box;
}
.inp {
    position: relative;
    width: 100%;
    max-width: 280px;
}
.inp .label {
    position: absolute;
    bottom: 2px;
    left: 0;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    transform-origin: 0 0;
    transition: all 0.2s ease;
}
.inp svg {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 26px;
    fill: none;
}
.inp svg path {
    stroke: #c8ccd4;
    stroke-width: 2;
}
.inp svg path d {
    transition: all 0.2s ease;
}
.inp .border {
    position: absolute;
    bottom: 0;
    left: 120px;
    height: 2px;
    right: 0;
    background: #c8ccd4;
}
.inp input {
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    padding-bottom: 2px;
    font-size: 16px;
    font-weight: 500;
    background: none;
    color: #223254;
    transition: all 0.15s ease;
}
.inp input:not(:placeholder-shown) + span {
    color: #07f;
    transform: translateY(-18px) scale(0.75);
}
.inp input:not([value=""]) {
    color: #07f;
}
.inp input:focus {
    background: none;
    outline: none;
    color: #07f;
}
.inp input:focus + span {
    color: #07f;
    transform: translateY(-18px) scale(0.75);
    transition-delay: 0.1s;
}
.inp input:focus + span + svg path {
    stroke: #07f;
    animation: elasticInput 0.4s ease forwards;
}
.inp input:not([value=""])+ span + svg path {
    stroke: #07f;
}
.inp input:focus + span + svg + .border {
    background: #07f;
}
.inp input:not([value=""])+ span + svg + .border {
    background: #07f;
}
@-moz-keyframes elasticInput {
    50% {
        d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25");
    }
}
@-webkit-keyframes elasticInput {
    50% {
        d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25");
    }
}
@-o-keyframes elasticInput {
    50% {
        d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25");
    }
}
@keyframes elasticInput {
    50% {
        d: path("M2,2 C21,17 46,25 74,25 C102,25 118,25 120,25");
    }
}
